<template>
    <div class="container">
        <div class="item">
            <headerView class="header" :headerTitle="headerTitle" />
            <div class="avatar"><img :src="src" alt="头像"></div>
        </div>
    </div>
</template>

<script setup name="Avatars">
import { ref } from 'vue';
import headerView from '@/components/Header/backHeader.vue';
const src = ref(window.sessionStorage.getItem('headImag'));
const headerTitle = ref({ title: '头像',color: 'white' });
</script>

<style scoped>
.container {
    width: 100vw;
    height: 100vh;
    background-color: black;
    overflow: hidden;
}
.item {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.header {
    width: 100vw;
    height: 60px;
}

.avatar {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
}

.avatar img {
    width: 100%;
    z-index: 1000;
}
</style>